<template>
	<view class="marketing">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index"
				@click="pageRoute('/agentPages/marketing-manage/marketing-detail?id='+item.id)">
				<view class="cover">
					<image :src="$imageUrl(item.img)" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name">店铺名称：{{item.store.name}}</view>
					<view class="name">活动名称：{{item.title}}</view>
					<view class="time">发布时间:{{item.create_time}}</view>
					<view class="desc">{{ item.remark }}</view>
				</view>
			</view>

			<view class="empty-data" v-if="list.length===0">暂无活动</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '活动专区',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		list: []
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		queryList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
		state.list = [];
		queryList();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		queryList();
	})

	function queryList() {
		state.list = [{
			id: 1,
			img: '/uploads/files/202509/12/file44d53f5a868d10215b32aeeff3b3b16e4505.jpg',
			title: '娃哈哈促销活动',
			store: {
				name: '云海水站'
			},
			remark: '森岛帆高水电费水电费',
			create_time: '2025-10-23 16:25:13'
		},{
			id: 2,
			img: '/uploads/files/202509/12/file44d53f5a868d10215b32aeeff3b3b16e4505.jpg',
			title: '五一大促',
			store: {
				name: '云海水站'
			},
			remark: '森岛帆高水电费水电费',
			create_time: '2025-10-23 16:25:13'
		}];
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.marketing {
		.list {
			padding: 0 $m24;

			.item {
				background: #fff;
				margin: 0 0 $m24 0;
				border-radius: 10rpx;

				.cover {
					width: 100%;
					height: 250rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					padding: $m16;

					.name {
						padding: $m16 0;
						font-size: $font-32;
						color: $main-color;
						font-weight: 700;
					}

					.time {
						margin: 0 0 $m8 0;
					}

					.desc {
						@include ellipsis(2);
						line-height: 40rpx;
						font-size: $font-28;
						color: $tips-color;
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>